<template>
    <el-tree-select ref="treeRef" v-model="value" :data="treeData" check-strictly multiple :render-after-expand="false"
        default-expand-all node-key="id" @change="handleNodeClick" 
        :disabled="disabled" clearable/>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs, watch } from 'vue'
import request from '/@/utils/request'

export default defineComponent({
    name: 'VpBaseSelectTreeMulit',
    emits: ['treeSelected'],
    props: {
        parentId: String,
        value: [],
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    setup(props, context) {
        const state = reactive({
            loading: false,
            treeData: []
        })
        const loadData = async () => {
            state.loading = true
            const res = await request.get('/system/base/treeList', {
                params: {
                    parentId: (props.parentId || '')
                }
            })
            state.treeData = res?.data || []
            state.loading = false
        }
        const init = () => {
            state.treeData = [];
        }
        watch(() => props.parentId, () => {
            init();
            loadData();
        })
        onMounted(async() => {
            await loadData();
        })
        const treeRef = ref();
        const handleNodeClick = (data: any) => {
            context.emit("treeSelected", data);
        }
        

        return {
            ...toRefs(state),
            ...toRefs(props),
            handleNodeClick,
            treeRef,
        }
    }
})
</script>
